<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<link rel="stylesheet" href="./css.css">
<link rel="stylesheet" href="./background.css">
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
<head>
    <meta charset="UTF-8">
    <title>FolkSpace</title>
</head>

<body>
<div class="container">
    <div id="stars"></div>
    <div id="stars2"></div>
    <div id="stars3"></div>
    <div class="logo">
        <img src="./logo.png" alt="">
    </div>
    <main>
        <p class="title">FolkSpace 密钥对工具</p>
        <div class="row">
            <form>
                <!-- <div class="input-group"> -->
                <input id="wait-sign-data" th:name="dataWithOutSign" placeholder="请输入需要签名的数据" required>
                <!-- </div> -->
                <!-- <div class="input-group"> -->
                <input id="private-key" th:name="privateKey" placeholder="请输入私钥" required>
                <!-- </div> -->
                <div class="button-q">
                    <button id="signBtn" type="button" th:onclick="signData()">签名</button>
                </div>
            </form>
            <div class="downloadBtn">
                <p id="notice-content">xxxxxxxxx-xxxxxxxxx-xxxxxxxx-xxxxxxx</p>
                <button id="downloadBtn" type="button" th:onclick="downloadKey()">EC密钥对下载</button>
            </div>
        </div>
    </main>
    <!--    <div class="footer_container">-->
    <!--        <div class="footer-intro">-->
    <!--            <h5>About</h5>-->
    <!--            <p>-->
    <!--                CODE WANTS TO BE SIMPLE is an initiative to help the upcoming-->
    <!--                programmers with the code. Scanfcode focuses on providing the most-->
    <!--                efficient code or snippets as the code wants to be simple. We will-->
    <!--                help programmers build up concepts in different programming-->
    <!--                languages that include C, C++, Java, HTML, CSS, Bootstrap,-->
    <!--                JavaScript, PHP, Android, SQL and Algorithm.-->
    <!--            </p>-->
    <!--        </div>-->
    <!--        <div>-->
    <!--            <h5>Categories</h5>-->
    <!--        </div>-->
    <!--        <div>-->
    <!--            <h5>UI Design</h5>-->
    <!--        </div>-->
    <!--        <div class="beian-container">-->
    <!--            <a target="_blank">-->
    <!--                <img src="./beian.jpg" style="display: inline-block"/>-->
    <!--                <p style="display: inline-block">京公网安备 11011402011429号</p>-->
    <!--            </a>-->
    <!--        </div>-->
    <!--        <div class="icon-container">-->
    <!--            <div class="icons">-->
    <!--                <a href="" class="iconLinks">-->
    <!--                    <svg class="icon" aria-hidden="true">-->
    <!--                        <use xlink:href="#icon-zhihu"></use>-->
    <!--                    </svg>-->
    <!--                </a>-->
    <!--            </div>-->
    <!--            <div class="icons">-->
    <!--                <a href="" class="iconLinks">-->
    <!--                    <svg class="icon" aria-hidden="true">-->
    <!--                        <use xlink:href="#icon-xinlangweibo"></use>-->
    <!--                    </svg>-->
    <!--                </a>-->
    <!--            </div>-->
    <!--            <div class="icons">-->
    <!--                <a href="" class="iconLinks">-->
    <!--                    <svg class="icon" aria-hidden="true">-->
    <!--                        <use xlink:href="#icon-douyin"></use>-->
    <!--                    </svg>-->
    <!--                </a>-->
    <!--            </div>-->
    <!--            <div class="icons">-->
    <!--                <a href="" class="iconLinks">-->
    <!--                    <svg class="icon" aria-hidden="true">-->
    <!--                        <use xlink:href="#icon-kuaishou"></use>-->
    <!--                    </svg>-->
    <!--                </a>-->
    <!--            </div>-->
    <!--            <div class="icons">-->
    <!--                <a href="" class="iconLinks">-->
    <!--                    <svg class="icon" aria-hidden="true">-->
    <!--                        <use xlink:href="#icon-bilibili-line"></use>-->
    <!--                    </svg>-->
    <!--                </a>-->
    <!--            </div>-->
    <!--            <div class="icons">-->
    <!--                <a href="" class="iconLinks">-->
    <!--                    <svg class="icon" aria-hidden="true">-->
    <!--                        <use xlink:href="#icon-weixin"></use>-->
    <!--                    </svg>-->
    <!--                </a>-->
    <!--            </div>-->
    <!--        </div>-->
    <!--    </div>-->
</div>
</body>
<script>
    // 下载密钥对
    function downloadKey() {
        window.location.href = "/getKeyPair";
    }

    // 签名数据
    function signData() {
        // 获取输入框的值
        let dataWithOutSign = document.getElementById("wait-sign-data").value;
        let privateKey = document.getElementById("private-key").value;

        // 获取提示标签
        let noticeElement = document.getElementById("notice-content");

        // 签名数据输入为空提示
        if (dataWithOutSign.length == 0) {
            noticeElement.setAttribute("class", "error");
            noticeElement.innerText = "请输入需要签名的数据";
            return;
        }

        // 私钥输入为空提示
        if (privateKey.length == 0) {
            noticeElement.setAttribute("class", "error");
            noticeElement.innerText = "请输入私钥";
            return;
        }

        // 签名数据输入长度错误提示
        // if (dataWithOutSign.length != 64) {
        //     noticeElement.setAttribute("class", "error");
        //     noticeElement.innerText = "需要签名的数据输入不正确，请重新输入64字符长度的签名数据";
        //     return;
        // }

        // 私钥输入长度错误提示
        if (privateKey.length != 64) {
            noticeElement.setAttribute("class", "error");
            noticeElement.innerText = "私钥输入不正确，请重新输入64字符长度的私钥";
            return;
        }

        // 参数校验合法, 则发送Ajax请求
        $.ajax({
            // 请求资源路径
            url: "/getSignData",
            // 是否异步
            async: true,
            // 请求参数
            data: {
                "dataWithOutSign": dataWithOutSign,
                "privateKey": privateKey
            },
            // 请求方式
            type: "POST",
            // 请求成功后调用的回调函数
            success: function (data) {
                debugger
                if (data == false) {
                    noticeElement.setAttribute("class", "error");
                    noticeElement.innerText = "参数输入非法，签名失败！请重新签名"
                } else {
                    // 下载完成签名的文件
                    // 模拟form表单提交下载文件
                    let tempForm = document.createElement("form");

                    tempForm.action = "/getSignData";
                    tempForm.method = "post";
                    tempForm.style.display = "none"

                    let opt_one = document.createElement("input");
                    opt_one.name = "dataWithOutSign";
                    opt_one.value = dataWithOutSign;
                    tempForm.appendChild(opt_one);

                    let opt_two = document.createElement("input");
                    opt_two.name = "privateKey";
                    opt_two.value = privateKey;
                    tempForm.appendChild(opt_two);

                    let opt_button = document.createElement("input");
                    opt_button.type = "submit";
                    tempForm.appendChild(opt_button);

                    document.body.appendChild(tempForm);
                    tempForm.submit();
                    document.body.removeChild(tempForm);
                }
            },
            // 请求失败后的回调函数
            error: function () {
                alert("操作错误！");
                window.location.href = "/";
            }
        })
    }
</script>
<script src="./icon.js"></script>
<script src="./rem.js"></script>
<script src="./jquery-3.3.1.min.js"></script>

</html>